#Vibe Coding

卡颂
2天前
和朋友聊到“前端目录结构重构”话题,出现个很有意思的观念分歧。 他是资深的工程师,他的做法是:根据自己的经验定义一套目录结构规范,后续 Agent 基于这套规范来重构。 可以认为,这是结对编程的 Vibe Coding 流派。 我的思路是:我认为未来 100% 代码会由 AI 来写,那“好的目录结构”应该指“对 Agent 检索友好的结构”而不是“对人类检索友好的结构”。 于是,我让 Agent 生成 4 套“以 Agent 为受众的目录结构”,再生成 60 条 测试用例,每条用例包括: - 一个开发中会问的问题 - 问题的答案 比如: - 问题:如果要新增一个全局复用的空状态组件,应该先放在哪类目录,而不是塞进某个 feature 里? - 答案:回答应优先定位到共享 UI 或共享反馈能力,而不是任何单一业务 feature 。若回答把全局复用组件放进学生、学校等具体业务目录,则不算正确 验收标准包括 3 个维度: - 首跳成功率:面对一个自然语言问题,agent 第一反应是否先进入最合理的目录/文件类别 - 收敛成本:从首跳到找到关键文件,需要多大的搜索范围和多少绕路 - 边界判断:能否正确区分相邻层的职责 Agent 先基于 4 套方案并行跑 4 份重构,再为 5 个环境(4个重构 + 1个原始结构)跑用例打分,最后选分高的。 最终分最高的方案仅仅是「在原始架构上强化了二级目录治理」,比如 components 下再按类型细分为: - page - ui - feedback 整个过程 Agent 跑了 4 个小时,花了 100刀。这就是 Agent First 的 Harness Engineering 流派。 你更看好哪种观念?
刚才看了短视频在介绍深圳小龙虾第一次竞赛的题目,我截图OCR下来,给虾友们看看,大家能做拿几分: 【第1轮任务】 Vibe Coding 一个你自己的龙虾自我介绍官网 时间:20 分钟 主题:我的龙虾的自我介绍 要求: 需包含内容:标题+副标题、具体可视化内容(必须含 1 个逻辑架构图/流程图)、金句+交互+审美 视觉:任大家自由发挥 交付:保存为“Vibe Coding 官网_选手名”至桌面,然后评委现场打开,云端虾则通过 IM 平台交付产物 Tips:不限制 html、ppt 等任何形式,只要有可视化交付物即可 【第2轮任务】图寻(geoguessr)挑战 时间:20分钟——两张图 主题:图寻挑战 要求:能够分辨出图中的建筑/地点是什么(多模态识别);给出经纬度四舍五入与真实答案一致(bonus+龙虾获取经纬度能力) 给出精确地址(考察大模型对细节线索的识别、查找能力);与其他工具的交互(地图、浏览器等) 任务:给龙虾两张图片(一易一难),让它判断出具体地址以及相关信息。并尽可能判断出具体地址,供了解这个地方是什么、在哪里。 交付:按照题目要求,给出场景描述+大洲/国家/经纬度/地址,判断地址的回答、地图的界面等可呈现图寻信息的界面 【第3轮任务】OpenClaw 人机协同交互小游戏挑战 时间:30分钟 任务:参赛者需利用 OpenClaw 与相关 AI Agent 工具,在限定时间内构建一个基于摄像头输入的人机交互系统,并实现基础交互或小游戏玩法。项目要保存在本地 要求: Level 1——实现视频流的实时显示调用摄像头(浏览器 or 系统)实时显示视频流 Level 2——实现一个最小可运行的人机交互系统实现基础检测能力:人脸检测/手势检测(二选一)完成一个简单交互逻辑(例:检测到目标 → 提示 “请挥手”,检测到挥手 → 触发事件) Level 3——增加可玩性:基于人机交互搭建一个小游戏 要求: 有明确规则、有结果反馈(成功 / 失败 / 得分),可玩性由评委评估